<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="根据标题查找" name="title"> <button onclick="getByTitle()">查找</button>
    <button>新增</button>
    <div id="show"></div>
    <script src="./jquery/jquery-3.6.1.min.js"></script>
    <script>
        $.get("http://localhost:3000/v1/all", (obj) => {
            showInfo(obj);
        });

        let div = $('#show');

        function showInfo(obj) {
            // 清空
            div.html('');

            
            if (obj.code === '200') {
                obj.data.forEach(element => {
                    let li = $(`<li>${element.id},${element['标题']},${element['作者']}</li>`);
                    div.append(li);
                });
            }
        }

        function getByTitle() {
            let value = $("[type='text']").val();
            console.log('值',value);
            // 判断是否为空
            if(value==''){
                alert('请输入内容');
                return;
            }
            //如果不为空，发送请求
            $.get("http://localhost:3000/v1/bytitle", { title: value }, (obj) => {
                showInfo(obj);
            });
        }

    </script>

</body>

</html>